<template>
  <div class="home">
    <div class="w">
      <keep-alive>
        <component :is="componentName" v-model:searchText="searchText"></component>
      </keep-alive>
      <div class="mode-options">
        <a-radio-group v-model:value="componentName" button-style="solid">
          <a-radio-button value="AddTodo">Add</a-radio-button>
          <a-radio-button value="SearchTodo">Search</a-radio-button>
        </a-radio-group>
      </div>
      <ul class="todo-list">
        <!-- vue3中带有v-for, v-if, v-show等指令的节点会自动生成唯一的key值，不需要手动给；如果手动给，必须保证唯一，所以如无必要，都不给指定key值 -->
        <li v-for="item in currentList">
          <TodoItem :item="item" @edit="edit" @del="del" @checkedChange="checkedChange" />
        </li>
      </ul>
    </div>
    <TodoEditModal v-model:visible="visible" v-model:item="editItem" @save="changeTodo"/>
  </div>
</template>

<script>
import { reactive, ref, onMounted, computed } from 'vue'
import AddTodo from '../components/AddTodo.vue'
import SearchTodo from '../components/SearchTodo.vue'
import TodoItem from '../components/TodoItem.vue'
import TodoEditModal from '../components/TodoEditModal.vue'
import { mapGetters, mapActions } from 'vuex'
export default {
  components: { AddTodo, SearchTodo, TodoItem, TodoEditModal },
  setup (props, context) {
    const componentName = ref('AddTodo')
    const visible = ref(false)
    const editItem = ref({})
    const searchText = ref('')
    
    return {
      componentName,
      visible,
      editItem,
      searchText
    }
  },
  computed: {
    ...mapGetters(['undoList', 'doneList']),
    currentList () {
      let list = null
      switch (this.componentName) {
        case 'AddTodo':
          list = this.undoList
          break
        case 'SearchTodo':
          if (this.searchText) {
            list = this.doneList.filter(i => ~i.title.indexOf(this.searchText) || ~i.details.indexOf(this.searchText))
          } else {
            list = this.doneList
          }
          break
        default:
          list = []
          break
      }
      return list
    }
  },
  created () {
    this.getTodoList()
  },
  methods: {
    ...mapActions(['getTodoList', 'modifyTodo', 'delTodo', 'undoTodo', 'doneTodo']),
    edit (item) {
      this.editItem = item
      this.visible = true
    },
    del (item) {
      this.delTodo(item._id)
    },
    changeTodo (item) {
      this.modifyTodo(item)
    },
    checkedChange (item) {
      this.modifyTodo(item)
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  display: flex;
  justify-content: center;
  padding-top: 100px;

  .w {
    width: 1200px;
  }

  .mode-options {
    margin-top: 16px;
  }

  .todo-list {
    list-style: none;
    text-align: left;
    padding-left: 0;
    li {
      margin-top: 16px;
      border: 1px solid #666;
      border-radius: 4px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 4px 16px;

      ::v-deep(>*:not(:first-child)) {
        margin-left: 16px;
      }
    }
  }
}

</style>
